<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="阅读文章" />
    <meta name="keywords" content="技术FAN" />
    <title th:if="${classID}==0">全部分类 - 技术FAN</title>
    <title th:if="${classID}==1">前后台技术 - 技术FAN</title>
    <title th:if="${classID}==2">计算机软件 - 技术FAN</title>
    <title th:if="${classID}==3">计算机硬件 - 技术FAN</title>
    <title th:if="${classID}==4">其他 - 技术FAN</title>
    <link th:href="@{/img/Fan_logo_alpha.png}" rel="icon" type="image/x-icon">
    <!--    <link rel="shortcut icon" th:href="@{/mo-favicon.ico}" type="image/x-icon">-->
    <link rel="stylesheet" th:href="@{/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css}"  media="all">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.3.0/css/layui.css}"  media="all">
    <link rel="stylesheet" th:href="@{/css/main.css}"  media="all">
    <!-- 自定义字体 -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <!-- 表格界面的主要css -->
    <link th:href="@{/css/sb-admin-2.css}" rel="stylesheet">
    <!-- 表格bootstrap -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">
    <style>
        /*去除a标签的所有效果*/
        /*包含以下四种的链接*/
        a {
            text-decoration: none;
        }
        /*正常的未被访问过的链接*/
        a:link {
            text-decoration: none;
        }
        /*已经访问过的链接*/
        a:visited {
            text-decoration: none;
        }
        /*鼠标划过(停留)的链接*/
        a:hover {
            text-decoration: none;
        }
        /* 正在点击的链接*/
        a:active {
            text-decoration: none;
        }
    </style>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
        .card-body:hover .image-wrapper{
            margin-top: -15px;
            box-shadow:  0 0 10px rgba(98, 95, 95, 0.5)
        }
        .image-wrapper{
            border-radius: 5px;
            transition: all 0.2s;
        }
        img{
            display: inline-block;
            height: auto;
            max-width: 100%;
        }
        /*响应String中的回车符*/
        #blogContent{
            white-space: pre-line;
        }
        #blogContent iframe{
            display: inline-block;
            height: 720px;
            max-width: 100%;
            width: 1080px;
        }
        #comment{
            white-space: pre-line;
        }
        #comment img{
            display: inline-block;
            height: auto;
            max-width: 20%;
        }
        .w-e-toolbar{
            flex-wrap:wrap;
        }
    </style>
</head>
<body class="timo-layout-page">
<!-- 顶部头条内容 -->
<div th:replace="/common/module.html::navBar"></div>
<!-- 顶栏到此为止 -->
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i>
            <span th:if="${classID}==0">全部分类 - 技术FAN</span>
            <span th:if="${classID}==1">前后台技术 - 技术FAN</span>
            <span th:if="${classID}==2">计算机软件 - 技术FAN</span>
            <span th:if="${classID}==3">计算机硬件 - 技术FAN</span>
            <span th:if="${classID}!=null">其他 - 技术FAN</span>
        </span>
        <a class="layui-table-link float-left text-secondary mr-1" href="/reader">返回首页</a>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">
        <div class="layui-row timo-card-screen">
            <div class="pull-left layui-form-pane timo-search-box">
                <div class="layui-inline">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" th:value="${param.title}" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">文章内容</label>
                    <div class="layui-input-block">
                        <input type="text" name="content" th:value="${param.content}" placeholder="请输入文章内容" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn timo-search-btn mb-2">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="timo-table-wrap">
            <table class="layui-table timo-table">
                <thead>
                <tr>
                    <th>文章列表</th>
                </tr>
                </thead>

                <tbody>
                    <tr th:each="item:${list}" role="row">
                        <td>
                            <div class="row mt-0 card-body animated--grow-in">
                                <div class="col-xl-12 col-md-12 mb-1">
                                    <div class="card border-left-primary shadow h-100 py-2">
                                        <div class="card-body w-100" style="max-width: 1600px;">
                                            <div class="row">
                                                <div class="col-lg-1">
                                                    <div class="image-wrapper text-center w-100 h-auto" style="height: 150px;width: 175px;overflow: hidden;">
                                                        <img style="width:100%;min-height:100%;" th:src="@{'/system/article/picture?p='+${item.getMainPicture()}}" alt="帖子主图">
                                                    </div>
                                                </div>
                                                <div class="col-11">
                                                    <div class="row no-gutters align-items-center">
                                                        <div class="col mr-auto">
                                                            <a  th:text="${item.title}" th:href="'/system/article/read/'+${item.id}" class="font-weight-bold text-primary h5 mb-1 ml-2">  文章标题  </a>
                                                        </div>
                                                    </div>
                                                    <div class="row no-gutters align-items-center">
                                                        <div class="col-9 mr-auto">
                                                            <div class="mb-0 font-weight-bold text-gray-800 ml-2" style="height: 75px;overflow: hidden;">
                                                                <div class="ml-1 h-100" style="white-space: normal;text-overflow:ellipsis;">文章内容：
                                                                    <div th:utext="${item.content}" class="h-100" th:href="'/system/article/read/'+${item.id}">  BlaBlaBlaBla...  </div>
                                                                </div>
                                                            </div>
                                                            <div class="mb-0 font-weight-bold text-gray-800 ml-2">
                                                                <small class="ml-1">发帖时间：  <span th:text="${#dates.format(item.createDate, 'yyyy-MM-dd HH:mm:ss')}"></span>  </small>
                                                            </div>
                                                        </div>
                                                        <div class="mr-2" style="margin-top:-30px;">
                                                            <div class="list-inline">
                                                        <span class="badge mt-2 badge-pill bg-info align-text-bottom text-light">文章分类：
                                                            <span th:switch="${item.articleClass}">
                                                                <span th:case="1">前后台技术</span>
                                                                <span th:case="2">计算机软件</span>
                                                                <span th:case="3">计算机硬件</span>
                                                                <span th:case="4">其他分类</span>
                                                                <span th:case="*">默认</span>
                                                            </span>
                                                        </span>
                                                                <br/>
                                                                <span class="badge mt-2 badge-pill bg-info align-text-bottom text-light">  <i th:text="${item.getCommentNumber()}">0</i>  | 回复数</span><br/>
                                                            </div>
                                                        </div>
                                                        <div class="col-auto text-center"></div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div th:replace="/common/fragment :: page"></div>
    </div>
    <!-- 页脚 -->
    <footer class="sticky-footer bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; 三峡大学2022 JAVA项目 Website 2022</span>
            </div>
        </div>
    </footer>
    <!-- 页脚-->
</div>
<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/js/ContentFiltering.js}"></script>
<script th:replace="/common/template :: script"></script>
<!-- Bootstrap core JavaScript-->
<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/ContentFiltering.js}"></script>
<!-- Core plugin JavaScript-->
<script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

<!-- Custom scripts for all pages-->
<script th:src="@{/js/sb-admin-2.js}"></script>

<!-- Page level plugins -->
<script th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/vendor/datatables/dataTables.bootstrap4.min.js}"></script>

<!-- Page level custom scripts -->
<script th:src="@{/js/demo/datatables-demo.js}"></script>
<script th:src="@{/js/getInformation.js}"></script>
</body>
</html>